<template>
<!-- 筛选区 -->
   <div class="sub-filter">
     <div class="item" v-for="item in list" :key="item.id">
       <div class="head">{{item.name}}</div>
       <div class="body">
         <a
          href="javascript:;"
          @click="getAttrFn(item, {})"
          :class="{ active: item.activeName === undefined}"
         >全部</a>
        <a
          href="javascript:;"
          v-for="item2 in item.properties"
          :key="item2.id"
          @click="getAttrFn(item, item2)"
          :class="{ active: item.activeName === item2.name }"
          >
          {{ item2.name }}
        </a>
       </div>
     </div>
   </div>
</template>

<script>
import { computed, inject, reactive, toRef } from 'vue'
export default {
  name: 'SubFilter',
  // 🔔  setup 钩子只运行一次
  setup () {
    const subCate = inject('subCate')
    const sortParams = inject('sortParams')
    // console.log(subCate)
    //  问题休息：把品牌也定义成响应式数据，否则视图更新不同步
    const brands = reactive({ id: null, name: '品牌', properties: subCate.value.brands })
    const list = computed(() => {
      // 🔔 计算属性内的 subCate 是依赖项，依赖项数据发生变化，computed 会重新计算得到结果
      return [
        // 品牌 - 后端是独立出来的一个字段，为了列表渲染更加方便，我们把数据合并到属性中
        brands,
        // 保留原来的属性
        ...subCate.value.saleProperties
      ]
    })
    const attrs = toRef(sortParams, 'attrs')
    const brandId = toRef(sortParams, 'brandId')

    const getAttrFn = (theItem, theProp) => {
      // 🔔 点击的时候获取属性名称，并通过 :class 绑定实现高亮
      theItem.activeName = theProp.name
      // 点击品牌的时候，收集的是品牌的id,并且需要存储到一个叫 brandId 的字段中
      if (theItem.name === '品牌') {
        brandId.value = theProp.id
        return
      }
      // 点击的时候有两种情况：
      const index = attrs.value.findIndex(item => item.groupName === theItem.name)
      // 情况1：当前属性没有被点击过，就添加一份新的属性数据
      if (index === -1) {
        attrs.value.push({ groupName: theItem.name, propertyName: theItem.activeName })
      } else {
        // 情况2：已经有的属性字段了，就改修值即可
        attrs.value[index].propertyName = theItem.activeName
      }
      // 过滤取出一些无效值
      attrs.value = attrs.value.filter(item => item.propertyName)
    }
    return { list, getAttrFn }
  }
}
</script>

<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
</style>
